<template>
    <view class="setting">
        <view class="userHeaderInfoEdit">
            // #ifdef MP-WEIXIN
            <view class="header">
                <image :src="setInfos.headimg" mode="scaleToFill" />
                <view>点击更新头像</view>
                <button open-type="chooseAvatar" hover-class="button-hover"  @chooseavatar="getupload" ></button>
            </view>
            // #endif
            // #ifdef H5
            <view class="header" @click="chooseAvatar">
                <image :src="setInfos.headimg" mode="scaleToFill" />
                <view>点击更新头像</view>
            </view>
            // #endif
            <view class="nickname">
                <view class="nickname-title">昵称</view>
                <view class="nickname-input">
                    <input v-model="setInfos.nickname" type="nickname" placeholder="请输入昵称" />
                </view>
            </view>
            <view class="btns flex flex-align flex-center">
                <button class="blue-linear" @click="saveInfo">保存资料</button>
            </view>
        </view>
        <view class="settingList">
            <view class="settingItem flex flex-align flex-bt">
                <view class="settingItemTitle"> 我的设备 </view>
                <view class="settingItemRight"> {{deviceInfo}} </view>
            </view>
            <view class="settingItem flex flex-align flex-bt">
                <view class="settingItemTitle"> 关于 </view>
                <view class="settingItemRight"> {{appVersion}} </view>
            </view>
        </view>
        <view class="tuichu">
            <button class="tuichu-btn btn out-shadow" @click="logout">退出登录</button>
        </view>
    </view>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { toast, uploadFile } from '@/utils'
import { computed, ref } from 'vue'
import API_USER from '@/api/user'
import { onLoad } from '@dcloudio/uni-app'
const userStore = useUserStore()
const userInfo = computed(()=>{
    return userStore.userInfo
})

const setInfos = ref({
    headimg:userInfo.value.headimg,
    nickname:userInfo.value.nickname
})

onLoad(()=>{
    getDeviceAndVersionInfo()
})

// 设备信息和小程序版本号
const deviceInfo = ref('')
const appVersion = ref('v1.0.0')

// 获取设备和版本信息
const getDeviceAndVersionInfo = () => {
    try {
        // 获取设备信息
        const systemInfo = uni.getSystemInfoSync()
        
        // 构建设备信息字符串
        let deviceStr = ''
        if (systemInfo.platform === 'android') {
            deviceStr = `Android ${systemInfo.system}`
        } else if (systemInfo.platform === 'ios') {
            deviceStr = `iOS ${systemInfo.system}`
        } else {
            deviceStr = systemInfo.platform
        }
        
        // 添加设备型号
        if (systemInfo.model) {
            deviceStr += ` ${systemInfo.model}`
        }
        
        deviceInfo.value = deviceStr
        
        // 获取小程序版本号
        // 注意：uni.getAppBaseInfo() 在较新版本的 UniApp 中支持
        const appBaseInfo = uni.getAppBaseInfo && uni.getAppBaseInfo()
        if (appBaseInfo && appBaseInfo.appVersion) {
            appVersion.value = appBaseInfo.appVersion
        }
        
    } catch (error) {
        console.error('获取设备信息失败:', error)
        deviceInfo.value = '获取失败'
    }
}


const logout = () => {
    userStore.token = ''
    uni.removeStorageSync('token')
    uni.removeStorageSync('userInfo')
    toast('退出登录成功')
    setTimeout(()=>{
      uni.reLaunch({
        url: '/pages/login/index'
      })
    },1000)
  }

const getupload = (e: any) => {
  uploadFile(e.target.avatarUrl).then((res: any) => {
    setInfos.value.headimg = res.url
  })
}

const saveInfo = () => {
    API_USER.updateUserInfo(setInfos.value).then((res: any) => {
        toast('保存成功')
        setTimeout(()=>{
            userStore.setUserInfo()
        },1000)
    })
}
const chooseAvatar = () => {
    uni.chooseImage({
        count: 1,
        success: (res) => {
            uploadFile(res.tempFilePaths[0]).then((res:any) => {
                console.log("uploadFile res ==> ", res);
                setInfos.value.headimg = res.url
            }).catch((err) => {
            })
        },
        fail: (err) => {
        }
    })
}
</script>
<style scoped lang="scss">
.setting{
    padding-top: 30rpx;
}
.userHeaderInfoEdit{
    background: #fff;margin:0 30rpx;
    padding:30rpx;border-radius: 20rpx;
    font-size: 30rpx;
    .header{
        text-align: center;position: relative;
        image{
            width: 140rpx;height: 140rpx;border-radius: 50%;
        }
        view{
            font-size: 24rpx;color: #969799;width: 200rpx;margin: 0 auto;
        }
        button{position: absolute;top: 0;left: 50%;width: 160rpx;height: 160rpx;margin-left: -80rpx;background: transparent;}

    }
    .nickname{
        margin-top: 30rpx;font-size: 24rpx;color: #969799;
        .nickname-input{
            margin-top: 20rpx;
            input{
                width: 100%;height: 80rpx;border-radius: 20rpx;font-size: 28rpx;background: #F5F6FA;text-align: center;border-radius: 60rpx;color: #333;
            }
        }

    }
    .btns{
        margin-top: 30rpx;
        button{
            width: 200rpx;height: 70rpx;border-radius: 20rpx;font-size: 28rpx;text-align: center;border-radius: 60rpx;color: #fff;margin: 0;line-height: 70rpx;
        }
    }
}
.settingList{
    margin: 30rpx;background: #fff;border-radius: 20rpx;padding:20rpx 30rpx;
    .settingItem{
        color: #333;height: 80rpx;
        .settingItemTitle{
            width: 200rpx;
        }
        .settingItemRight{
            color: #969799;
        }

    }
}
.tuichu{
    position: fixed;
    bottom: 30rpx;
    width: 100%;
    .tuichu-btn{
        color: #333;background: #fff;
    }

}

</style>
